<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="CSS/index.css"/>
	<script >
		
	</script>
</head>
<body>
    <ul class="nav">
        <li class="first">数据检测</li>
        <li class="second">视频监控</li>
        <!-- <li class="three">第二页</li> -->
    </ul>
    <!-- 使用display属性 -->
    <div id="page01" class=" page" style="display:block"> 
		<!-- 温度 -->
		<div class="shuju" id="temperature1">
			<img src="img/temperature.png" />
			<input type="text" name="temperature" class="xians" >
		</div>
		<!-- 湿度 -->
		<div class="shuju" id="humidity1">
		<img src="img/humidity.png" />
		<input type="text" name="thumidity" class="xians" >
		</div>
		<!-- 角度 -->
		<div class="shuju" id="angle1">
			<img src="img/angle.png" />
			<input type="text" name="angle" class="xians" >
		</div>
		<!-- 沉降 -->
		<div class="shuju" id="subsidence1" >
			<img src="img/subsidence.png" />
			<input type="text" name="subsidence" class="xians" >
		</div>
		<!-- 二氧化碳 -->
		<div class="shuju" id="CO2-concen1">
			<img src="img/CO2-concen.png" />
			<input type="text" name="CO2-concen" class="xians">
		</div>
		<!-- 压力 -->
		<div class="shuju" id="wind1">
			<img src="img/wind.png" />
			<input type="text" name="wind" class="xians" >
		</div>
		
		<!-- 灯 -->
		<div class="shuju" id="light1" >
			<img src="img/light.png" />
			<div class="kaiguan">
				<p class="kon">ON:</p>
				<input type="radio" name="led" id="dON" onclick="fun(id)" style="width: 30px; height: 30px; left:35px ">
				<p class="koff">OFF:</p>
				<input type="radio" name="led" id="dOFF" onclick="fun(id)"style="width: 30px; height: 30px;left:110px">
			</div>
		</div>
		<!-- 蜂鸣器(beep) -->
		<div class="shuju" id="beep1">
			<img src="img/beep.png" />
	<div class="kaiguan" >
		<p class="kon">ON:</p>
		<input type="radio" name="led" id="dON" onclick="fun1(id)" style="width: 30px; height: 30px; left:35px ">
		<p class="koff">OFF:</p>
		<input type="radio" name="led" id="dOFF" onclick="fun1(id)"style="width: 30px; height: 30px;left:110px">
	</div>
			
		</div>
		<!-- 喷淋器 (spray)-->
		<div class="shuju" id="spray1">
			<img src="img/spray.png" />
			 
			 <div class="kaiguan" >
			 	<p class="kon">ON:</p>
			 	<input type="radio" name="led" id="dON" onclick="fun2(id)" style="width: 30px; height: 30px; left:35px " >
			 	<p class="koff">OFF:</p>
			 	<input type="radio" name="led" id="dOFF" onclick="fun2(id)"style="width: 30px; height: 30px;left:110px" >
			 </div>
		</div>
		
		
    </div>
    <div id="page02" class=" page" style="display:none">
        <!-- <h1>视频监控</h1> -->
		<div class="videoBox">
			<img src="http://192.168.50.245:8080/?action=stream" />
		</div>
		
		<button style="position: absolute; width: 100px; height: 50px; left: 330px; top: 40px;">拍照</button>
    </div>
   
	<script src="JS/index.js" type="text/javascript" charset="utf-8"></script>
    <script>
        //使用排他思想
        //获取导航栏按钮
        let lis = document.querySelectorAll('li')
        //获取三个要切换的盒子
        let page01 = document.getElementById('page01')
        let page02 = document.getElementById('page02')
        // let page03 = document.getElementById('page03')
        //点击导航栏，改变Iframe的src属性，实现页面切换
        for (let i = 0; i < lis.length; i++) {
            //绑定点击事件
            lis[i].onclick = function(event){
                if(event.target.classList.contains('first')){
                    changPage()
                    page01.style.display = 'block'
                }else if(event.target.classList.contains('second')){
                    changPage()
                    page02.style.display = 'block'
                }else{
                    changPage()
                    page03.style.display = 'block'
                }
            }
        }
        //封装一个排他思想的函数                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
        function changPage(){
            //获取所有page
            document.querySelectorAll('.page').forEach(el=>{
                el.style.display = 'none'
            })
        }
    </script>
</body>
</html>